<template>
  <select class="selector" v-model="op">
    <option v-for="(item, index) in options"
            :key="index">
      {{ item.name }}
    </option>

  </select>
</template>

<script>
export default {
  name: "selector",
  props: {
    options: Array,
  },
  watch: {
    op: function(val) {
      this.$emit('optionChangedEvent', val)
    }
  },

  data() {
    return {
      op: this.options[0].name
    }
  }
};
</script>

<style scoped>
  .selector {
    /*appearance: none;*/
    width: 150px;
    height: 35px;
    margin: 10px 0;
    background: transparent;
    padding: 5px 10px;
    outline: transparent;
    border: 1px solid white;
    border-radius: 3px;
    color: white;
  }

  option {
    appearance: none;
    border: none;
    border-radius: 3px;
    outline: transparent;
    background-color: rgb(1,0,29);
  }
</style>